<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./stylesheets/reset.css">
    <link rel="stylesheet" href="stylesheets/bootstrap.min.css">
    <style>
        input {
            border: 1px solid #ccc;
        }

        a {
            color: blue;
        }

        #logo {
            margin-top: 60px;
            position: relative;
            margin-left: 16.666%;
        }

        #logo ul {
            position: absolute;
            left: 35%;
            top: 30px;

        }

        #logo li {
            float: left;
            font-size: 20px;
        }

        #list1 {
            width: 100%;

        }

        #list1 form {
            width: 70%;
            margin-left: 16.666%;
            border-top: 1px #ccc;
            font-size: 12px;
        }

        #list1 form div {
            margin-top: 8px;
        }

        #list1 form input {
            border: 1px solid #ccc;
        }

        #list1 table {
            width: 70%;
            margin-left: 16.666%;
            border-top: 1px #ccc;
            text-align: center;

        }

        /*发票信息*/
        .fpxx {
            width: 100%;
            height: 120px;
            border-bottom: 1px solid #e4e4e4;
            margin-bottom: 20px;
        }

        .fpxx p {
            font-size: 16px;
        }

        .fpxx div {
            margin-bottom: 10px;
        }

        .fpxx label {
            margin-right: 20px;
        }

        .fpxx em {
            color: red;
        }

        .ddbz {
            width: 100%;
            height: 80px;
            border-bottom: 1px solid #e4e4e4;
            margin-bottom: 20px;
        }

        .ddbz p {
            font-size: 16px;
        }

        .ddbz input {
            width: 50%;
        }

        /*次日达·礼拜五专享*/
        .lbwzx {
            width: 100%;
            /*height: 240px;*/
            border-bottom: 1px solid #e4e4e4;
            margin-bottom: 20px;
        }

        .lbwzx p {
            font-size: 16px;
            color: #699f61;
            margin-bottom: 20px;
        }

        .choiceTime p {
            color: black;
            display: inline-block;
            margin-right: 30px;
        }



        #cTime {
            width: 70%;
            height: 130px;
            background: #dcffd8;
            border: 1px solid #d3d3d3;
            display: none;
            margin-left: 15%;
            margin-bottom: 30px;
        }

        .cTime-1 {
            width: 92%;
            margin-left: 4%;
            margin-top: 20px;
        }

        .cTime-1 table {
            background: white;
            width: 100%;
            text-align: center;
            cursor: pointer;
        }

        .cTime-sure {
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .cTime-sure button {
            margin-right: 20px;
            border: none;
            outline: none;
            background: #f08200;
            color: white;
            border-radius: 6px;
        }

        /*提交订单*/
        .tjdd {
            width: 100%;
            height: 100px;
            margin-bottom: 20px;
        }

        .tjdd p {
            text-align: right;
        }

        .tjdd p span {
            color: red;
            font-size: 20px;
        }

        .tjdd p em {
            color: #f08200;
            margin-left: 20px;
        }

        .tjdd div button {
            float: right;
            outline: none;
            border: none;
            background: #f08200;
            color: white;
            border-radius: 6px;
        }

        #boxbott {
            width: 70%;
            margin-left: 16.666%;
        }

        #list1 table {
            width: 70%;
            border-top: 1px #ccc;
            text-align: left;
            border: 1px solid #ccc;
            margin-top: 10px;
            margin-bottom: 30px;
            text-align: center;
        }

        #list1 table td {
            height: 80px;
            border: none;
            border-top: 1px solid #ccc;
            overflow: hidden;
        }

        #list1 table img {
            width: 100px;
            height: 80px;
        }

        #list1 table th {
            background: #ccc;
            height: 40px;
            text-align: center;
        }

        .xunzhong,
        #inpHeader {
            width: 20px;
            height: 20px;

        }

        .jian,
        .jia {
            width: 20px;
            height: 15px;
            border: 1px solid #ccc;
            position: relative;
            top: 2px;
            line-height: 15px;
        }

        #tiaozhuan {
            background: #f08200;
            padding: 2px 5px;
            border-radius: 5px;
        }

        #butqz {
            height: 30px;
            border: 1px solid;
            width: 200px;
            margin-left: 50px;
            background: #f08200;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <div id="lxcbox">
        <div id="lxcheader"></div>
    </div>


    <div id="logo">
        <img src="./images/lxc/logo.png" alt="">
        <ul>
            <li style="color: #f08200;margin-left:200px ;">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </li>
            <li>&nbsp;&nbsp;确认订单消息&nbsp;&nbsp;&nbsp;></li>
            <li>&nbsp;&nbsp;订单提交成功</li>
        </ul>
    </div>
    <!-- <strong style="margin-left:16.666% ;">购物车</strong> -->

    <div id="list1">
        <form action="" method="post" enctype="multipart/form-data">
            <div>
                <label for=""><span>收货人信息</span>
                    <input type="text" name="" id="Uname">
                </label>
            </div>

            <div>
                <label for=""><span>所在地址&nbsp;&nbsp;&nbsp;</span>
                    <input type="text" name="" id="Upast">
                </label>
            </div>

            <div>
                <label for=""><span>详情地址&nbsp;&nbsp;&nbsp;</span>
                    <select name="" id="selProvince">
                        <option value="" class="opt">----请选择----</option>
                    </select>
                    <select name="" id="selCity">
                        <option value="" class="opt">----请选择----</option>
                    </select>
                    <select name="" id="selCountry">
                        <option value="" class="opt">----请选择----</option>
                    </select>
                </label>
            </div>
            <div>
                <label for=""><span>练习电话&nbsp;&nbsp;&nbsp;</span>
                    <input type="text" name="" id="Uphon">
                </label>
            </div>
            <div>
                <label for="">
                    <input type="button" name="" id="butqz" value="确认并设置为默认地址">
                </label>
            </div>



        </form>
        <div id="list1">
            <table>
                <tr>
                    <th style="width: 50px;"><input type="checkbox" id="inpHeader"></th>
                    <th style="width: 100px;">爱果果的水果店</th>
                    <th style="width: 100px;">规格</th>
                    <th style="width: 100px;">单价</th>
                    <th style="width: 100px;">数量</th>
                    <th style="width: 100px;">金额</th>
                    <th style="width: 100px;">操作</th>
                </tr>

                <tr id="jine">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>商品金额 <strong id="zhongjine1">0</strong></td>

                </tr>
                <tr>
                    <td id="quanxuan" style="color: red;">全选</td>
                    <td id="piliangdel">批量删除</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td colspan="2">商品金额 <strong>￥<span id="zhongjine"></span></strong>
                    </td>

                </tr>
            </table>
        </div>

        <div id="boxbott">
            <!--            开票信息-->
            <div class="fpxx">
                <p>开票信息</p>
                <div>
                    <input type="radio" id="noXu">
                    <label for="noXu">不需要</label>
                    <input type="radio" id="geren">
                    <label for="geren">个人</label>
                    <input type="radio" id="danwei">
                    <label for="danwei">单位</label>
                </div>
                <label>发票抬头：</label>
                <input type="text">
                <em>*</em>
                <span>请填写后认真核对发票信息</span>
            </div>
            <!--            添加订单备注-->
            <div class="ddbz">
                <p>添加订单备注</p>
                <input type="text" placeholder="限45个字，请填写有关商品、支付、发票等信息">
            </div>
            <!--            次日达。礼拜五专享-->
            <div class="lbwzx">
                <p>次日达·礼拜五专享:</p>
                <div class="choiceTime">
                    <p>选择送达时间：2016年11月11日&nbsp;&nbsp;<span id="time">11:00~13:00</span>
                    </p>
                    <em id="alter">点击修改</em>
                    <div id="cTime">
                        <div class="cTime-1">
                            <table border="1" id="tab">
                                <tr>
                                    <td>10:00~13:00</td>
                                    <td>11:00~14:00</td>
                                    <td>12:00~15:00</td>
                                    <td>13:00~16:00</td>
                                    <td>14:00~17:00</td>
                                </tr>
                                <tr>
                                    <td>15:00~18:00</td>
                                    <td>16:00~19:00</td>
                                    <td>17:00~20:00</td>
                                    <td>18:00~21:00</td>
                                    <td>19:00~22:00</td>
                                </tr>
                            </table>
                        </div>
                        <div class="cTime-sure">
                            <button id="cancel">取消</button>
                            <button id="confirm">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <!--            提交订单-->
            <div class="tjdd">
                <p>实付金额：<span id="zhongjine2"></span></p>
                <p>订单完成后可获得积分：<em id="zhongjine3"></em>积分</p>
                <div>
                    <button>提交订单</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部 -->
    <div id="lxcfooter">
        <div id="lxcfooter1"></div>
        <div id="lxcfooter2"></div>
        <div id="lxcbottom"></div>
    </div>
    <div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
            </div>
        </div>
    </div>
</body>

</html>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./javascripts/bootstrap.min.js"></script>
<script src="./javascripts/lxcheader.js"></script>
<script>
    { //城市三级联动
        $(".opt").click(function (e) {
            alert('请选择城市')
        });
        var iNum1;
        var iNum2;
        var aProvince = ['湖北', '江苏', '安徽'];
        var aCity = [
            ['武汉', '黄冈', '荆门'],
            ['南京', '无锡', '镇江'],
            ['合肥', '安庆', '黄山']
        ];
        var aCountry = [
            [
                ['武汉1', '武汉2'],
                ['黄冈1', '黄冈2'],
                ['荆门1', '荆门2']
            ],
            [
                ['南京1', '南京2'],
                ['无锡1', '无锡2'],
                ['镇江1', '镇江2']
            ],
            [
                ['合肥1', '合肥2'],
                ['安庆1', '安庆2'],
                ['黄山1', '黄山2']
            ]
        ];

        $(function () {
            for (var i = 0; i < aProvince.length; i++) {
                $('#selProvince').append('<option>' + aProvince[i] + '</option>');
            };
            $('#selProvince').change(function () {
                $('#selCity').children().not(':eq(0)').remove();
                $('#selCountry').children().not(':eq(0)').remove();
                iNum1 = $(this).children('option:selected').index();
                var aaCity = aCity[iNum1 - 1];
                for (var j = 0; j < aaCity.length; j++) {
                    $('#selCity').append('<option>' + aaCity[j] + '</option>');
                }
            });
            $('#selCity').change(function () {
                $('#selCountry').children().not(':eq(0)').remove();
                iNum2 = $(this).children('option:selected').index();
                var aaCountry = aCountry[iNum1 - 1][iNum2 - 1];
                for (var k = 0; k < aaCountry.length; k++) {
                    $('#selCountry').append('<option>' + aaCountry[k] + '</option>');
                }
            })
        });


    }
 //ajax请求
 {

//添加到 #jine前面
$.ajax({
    type: "post",
    url: "/lxcgouwuche/biao",
    data: {
        goodId: localStorage.userID

    },
    dataType: "json",
    success: function (response) {
        console.log(response);
        
        for (let i = 0; i < response.length; i++) {
            var pp = $('<tr>').insertBefore('#jine');
            var t1 = $('<td>').appendTo(pp);
            var t2 = $('<td>').appendTo(pp);
            var t3 = $('<td>').appendTo(pp).html(response[i].car_zl);
            var t4 = $('<td>').appendTo(pp).addClass('danjia').html('￥');
            var t5 = $('<td>').appendTo(pp);
            var t6 = $('<td>').appendTo(pp).addClass('jiaqian').html('￥');
            var t7 = $('<td>').appendTo(pp).addClass('del').html('删除');
            $('<input type="checkbox" class="xunzhong ">').appendTo(t1);

            $('<img>').appendTo(t2).attr({
                src: response[i].car_img,
            });
            $('<span>').appendTo(t2).html(response[i].car_name).css({
                display: 'inline-block',
                width: '20px',
                height: '80px'
            });
            $('<span>').appendTo(t4).html(response[i].car_price);
            $('<input type="button" value="-" class="jian">').appendTo(t5);
            $('<span>').appendTo(t5).html(1);
            $('<input type="button" value="+" class="jia">').appendTo(t5);
            $('<span>').appendTo(t6).html(response[i].car_price);

        }
        jisuan();

    }
});
}

    {
       
        var url = location.search.substring(1);
        if(url==0){

        }else{
             $.ajax({
            type: "post",
            url: "/lxcshangjiabupeisong/biao",
            data: {
                past: localStorage.userID
            },
            dataType: "json",
            success: function (response) {
                console.log(response);
                $('#Uname').val(response[0].userName);
                $('#Upast').val(response[0].address);
                $('#Uphon').val(response[0].tel);
                $('#selProvince').val(localStorage.usersheng);
            }
        });
        }

        $('#butqz').click(function (e) {
            //增加 地址
            if (url == 0) {

                let pa1 = localStorage.userID;
                let pa2 = $('#Uname').val();
                let pa3 = $('#Upast').val();
                let pa4 = $('#Uphon').val();
                console.log(pa1, pa2, pa3, pa4);
                $.ajax({
                    type: "post",
                    url: "/lxcdingdanshouhuodizhi/zhengjia",
                    data: { // funzhengjia([null,1,'超','村里的孩子','000000',0]);
                        past: [null, pa1, pa2, pa3, pa4, 0]

                    },
                    dataType: "json",
                    success: function (response) {
                        alert('添加成功')
                    }
                });
            } else {
                if ($('#Uphon').val() == '') {

                } else {
                    let pa4 = url;
                    let pa1 = $('#Uname').val();
                    let pa2 = $('#Upast').val();
                    let pa3 = $('#Uphon').val();
                    console.log(pa4, pa1, pa2, pa3);
                    $.ajax({
                        type: "post",
                        url: "/lxcdingdanshouhuodizhi/xiugai",
                        data:{ //['超爷爷','村里的孩子','000000',2]
                            past: [pa1, pa2, pa3, pa4]
                        } ,
                        dataType:"json" ,
                        success: function (response) {
                            alert('修改成功')
                        }
                    });
                }
            }

        });

    }
    function jisuan() {

{ //表操作
    //加减法
    $("#quanxuan").click(function (e) {
        $('.xunzhong').prop('checked', 'checked');
        $('#inpHeader').prop('checked', 'checked')
    });

    $('#inpHeader').click(function (e) {
        if ($('#inpHeader').prop('checked') == false) {
            $('.xunzhong').prop('checked', false);
        } else {
            $('.xunzhong').prop('checked', 'checked');
        }
    });

    $(".xunzhong").click(function (e) {
        for (var p = 0; p < $('.xunzhong').length; p++) {
            if ($('.xunzhong').eq(p).prop('checked') == false) {
                $('#inpHeader').prop('checked', false);
                return;
            } else {
                $('#inpHeader').prop('checked', true)
            }
        }

    });



    $("#piliangdel").click(function (e) {

        if ($('#inpHeader').prop('checked') == true) {
            $('#inpHeader').parent().parent().parent().remove();
        } else {
            $('.xunzhong').each(function (i, v) {
                if ($(this).prop('checked') == true) {
                    $(this).parent('tr').remove();
                }
            })

        }

    });

    $('.jian').click(function (e) {
        thit = this;
        var offset = $(this).siblings('span');
        var shuliang = Number($(offset).html());
        if (shuliang < 1) {
            shuliang = 1;
        }
        $(offset).html(shuliang -= 1);
        jiaqian(thit, shuliang);
    });
    $('.jia').click(function (e) {
        thit = this;
        var offset = $(this).siblings('span');
        var shuliang = Number($(offset).html());
        $(offset).html(shuliang += 1);
        jiaqian(thit, shuliang);
    });

    function jiaqian(thit, shuliang) {
        var dj = parseFloat($(thit).parent().siblings('.danjia').children('span').html());
        var zj = $(thit).parent().siblings('.jiaqian').children('span');
        $(zj).html(dj * shuliang);
        zjq(zj);
    }

    function zjq(zj) {

        var arr = 0;
        $(".jiaqian span").each(function (i, v) {
            console.log(parseFloat($(this).html()));
            arr += parseFloat($(this).html());
            console.log(arr);
        });


        $("#zhongjine").html(arr);
        $("#zhongjine1").html(arr);
        $("#zhongjine2").html(arr);
        $("#zhongjine3").html(arr);

    }
    $(".del").click(function (e) {
        $(this).parent().remove();


    });
}

};
$(".tjdd div button").click(function (e) {
            window.location.href = '/lxcchenggongdingdan'
        });

</script>